<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />

<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />

<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">

<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Bootstrap  -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Owl Carousel  -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style  -->
<link rel="stylesheet" href="css/style.css">

<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>
<body>
	
<div class="gtco-loader"></div>

<div id="page">
<nav class="gtco-nav" role="navigation">
	<div class="gtco-container">
		<div class="row">
			<div class="col-sm-2 col-xs-12">
				<div id="gtco-logo"><a href="index.html">黄海个人网站 <em>.</em></a></div>
			</div>
			<div class="col-xs-10 text-right menu-1 main-nav">
				<ul>
					<li class="active"><a href="#" data-nav-section="home">Home</a></li>
					<!-- <li><a href="#" data-nav-section="services">Services</a></li> -->
					<li><a href="#" data-nav-section="portfolio">Portfolio</a></li>
					<li><a href="#" data-nav-section="blog">Blog</a></li>
					<li><a href="#" data-nav-section="contact">Contact</a></li>
					<li><a href="#" class="external">External</a></li>
				</ul>
			</div>
		</div>
		
	</div>
</nav>

<div id="gtco-hero" class="js-fullheight"  data-section="home">
	<div class="flexslider js-fullheight">
		<ul class="slides">
		<li style="background-image: url(images/img_bg_1.jpg);">
			<div class="overlay"></div>
			<div class="container">
				<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
					<div class="slider-text-inner">
						<h2>昔日萍洲书院</h2>
						<p>Follow @Yellowsea</p>
					</div>
				</div>
			</div>
		</li>
		<li style="background-image: url(images/img_bg_2.jpg);">
			<div class="overlay"></div>
			<div class="container">
				<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
					<div class="slider-text-inner">
						<h2>眺望芝山寺</h2>
						<!-- <p><a href="#" class="btn btn-primary btn-lg">Get started</a></p> -->
					</div>
				</div>
			</div>
		</li>
		<li style="background-image: url(images/img_bg_3.jpg);">
			<div class="overlay"></div>
			<div class="container">
				<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
					<div class="slider-text-inner">
						<h2>漫步永州大道</h2>
						<!-- <p><a href="#" class="btn btn-primary btn-lg">Get started</a></p> -->
					</div>
				</div>
			</div>
		</li>
		</ul>
	</div>
</div>
<div class="gtco-section-overflow">

	<!-- <div class="gtco-section" id="gtco-services" data-section="services">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-6">
					<div class="gtco-heading">
						<h2 class="gtco-left">Services</h2>
						<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="row">

						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-paper-clip"></i>
								</span>
								<div class="feature-copy">
									<h3>Web Development</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-monitor"></i>
								</span>
								<div class="feature-copy">
									<h3>Web Design</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-toggle"></i>
								</span>
								<div class="feature-copy">
									<h3>Customer Support</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-layout"></i>
								</span>
								<div class="feature-copy">
									<h3>Web Design</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-6 animate-box" data-animate-effect="fadeIn">
					<div class="row">
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-pencil"></i>
								</span>
								<div class="feature-copy">
									<h3>Copy Writing</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-cog"></i>
								</span>
								<div class="feature-copy">
									<h3>CMS Development</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-layers"></i>
								</span>
								<div class="feature-copy">
									<h3>Data Gathering</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<div class="feature-left">
								<span class="icon">
									<i class="icon-search"></i>
								</span>
								<div class="feature-copy">
									<h3>Search Engine</h3>
									<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> -->

	<div class="gtco-section" id="gtco-portfolio" data-section="portfolio">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>Portfolio</h2>
					<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<a href="images/img_2.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_2.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_1.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_1.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_3.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_3.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>

				<div class="col-md-4">
					<a href="images/img_4.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_4.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_5.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_5.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_6.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_6.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>

				<div class="col-md-4">
					<a href="images/img_2.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_2.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_1.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_1.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>
				<div class="col-md-4">
					<a href="images/img_3.jpg" class="gtco-card-item image-popup" title="Project name here.">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img src="images/img_3.jpg" alt="Image" class="img-responsive">
						</figure>
					</a>
				</div>

			</div>
		</div>
	</div>

	<div class="gtco-section" id="gtco-faq" data-section="faq">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>Frequently Ask Questions</h2>
					<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">

					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>What is Asymmetry?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>
					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>I have technical problem, who do I email?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>
					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>How do I use Asymmetry features?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>

				</div>
				<div class="col-md-6">

					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>What language are available?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>
					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>Can I have a username that is already taken?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>
					<div class="gtco-accordion">
						<div class="gtco-accordion-heading">
							<div class="icon"><i class="icon-cross"></i></div>
							<h3>Is Asymmetry free?</h3>
						</div>
						<div class="gtco-accordion-content">
							<div class="inner">
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

</div>

<div id="gtco-blog" data-section="blog">
	<div class="gtco-container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
				<h2>Blog</h2>
				<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_1.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>

			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_2.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>
			<div class="clearfix visible-sm-block"></div>
			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_3.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>
			<div class="clearfix visible-lg-block visible-md-block"></div>

			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_4.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>
			<div class="clearfix visible-sm-block"></div>

			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_5.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>

			<div class="col-md-4">
				<a href="#" class="gtco-card-item has-text">
					<figure>
						<div class="overlay"><i class="ti-plus"></i></div>
						<img src="images/img_6.jpg" alt="Image" class="img-responsive">
					</figure>
					<div class="gtco-text text-left">
						<h2>25 Minimal Web Design for Inspiration</h2>
						<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
						<p class="gtco-category">Sep. 25th, 2016 by John Doe</p>
					</div>
				</a>
			</div>
			<div class="clearfix visible-lg-block visible-md-block"></div>
			<div class="clearfix visible-sm-block"></div>

		</div>
	</div>
</div>

<div class="gtco-section-overflow">
	<div id="gtco-counter" class="gtco-section">
		<div class="gtco-container">

			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>Fun Facts</h2>
					<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
				</div>
			</div>

			<div class="row">
				
				<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
					<div class="feature-center">
						<span class="icon">
							<i class="ti-download"></i>
						</span>
						<span class="counter js-counter" data-from="0" data-to="2122070" data-speed="5000" data-refresh-interval="50">1</span>
						<span class="counter-label">Downloads</span>

					</div>
				</div>
				<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
					<div class="feature-center">
						<span class="icon">
							<i class="ti-face-smile"></i>
						</span>
						<span class="counter js-counter" data-from="0" data-to="402002" data-speed="5000" data-refresh-interval="50">1</span>
						<span class="counter-label">Happy Clients</span>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
					<div class="feature-center">
						<span class="icon">
							<i class="ti-briefcase"></i>
						</span>
						<span class="counter js-counter" data-from="0" data-to="402" data-speed="5000" data-refresh-interval="50">1</span>
						<span class="counter-label">Projects Done</span>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
					<div class="feature-center">
						<span class="icon">
							<i class="ti-time"></i>
						</span>
						<span class="counter js-counter" data-from="0" data-to="212023" data-speed="5000" data-refresh-interval="50">1</span>
						<span class="counter-label">Hours Spent</span>

					</div>
				</div>
					
			</div>
		</div>
	</div>

	<div id="gtco-products" data-section="products">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>Products</h2>
					<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
				</div>
			</div>
			<div class="row">
				<div class="owl-carousel owl-carousel-carousel">
					<div class="item">
						<img src="images/img_1.jpg" alt="Free HTML5 Bootstrap Template by GetTemplates.co">
					</div>
					<div class="item">
						<img src="images/img_2.jpg" alt="Free HTML5 Bootstrap Template by GetTemplates.co">
					</div>
					<div class="item">
						<img src="images/img_3.jpg" alt="Free HTML5 Bootstrap Template by GetTemplates.co">
					</div>
					<div class="item">
						<img src="images/img_4.jpg" alt="Free HTML5 Bootstrap Template by GetTemplates.co">
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<div id="gtco-subscribe">
	<div class="gtco-container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
				<h2>Subscribe</h2>
				<p>Be the first to know about the new templates.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<form class="form-inline">
					<div class="col-md-4 col-sm-4">
						<div class="form-group">
							<label for="email" class="sr-only">Email</label>
							<input type="email" class="form-control" id="email" placeholder="Your Email">
						</div>
					</div>
					<div class="col-md-4 col-sm-4">
						<div class="form-group">
							<label for="name" class="sr-only">Name</label>
							<input type="text" class="form-control" id="name" placeholder="Your Name">
						</div>
					</div>
					<div class="col-md-4 col-sm-4">
						<button type="submit" class="btn btn-danger btn-block">Subscribe</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="gtco-contact" data-section="contact" class="gtco-cover gtco-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
	<div class="overlay"></div>
	<div class="gtco-container">
		<div class="row text-center">
			<div class="display-t">
				<div class="display-tc">
					<div class="col-md-12">
						<h3>If you have inqueries please email us at <a href="#">info@yourdomain.com</a></h3>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<footer id="gtco-footer" role="contentinfo">
	<div class="gtco-container">
		
		<div class="row copyright">
			<div class="col-md-12">
				<p class="pull-left">
			
				</p>
				<p class="pull-right">
					<ul class="gtco-social-icons pull-right">
						<li><a href="#"><i class="icon-twitter"></i></a></li>
						<li><a href="#"><i class="icon-facebook"></i></a></li>
						<li><a href="#"><i class="icon-linkedin"></i></a></li>
						<li><a href="#"><i class="icon-dribbble"></i></a></li>
					</ul>
				</p>
			</div>
		</div>

	</div>
</footer>
</div>

<div class="gototop js-top">
	<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="js/main.js"></script>

</body>
</html>